//轮播图特效
(function () {
  const carousel_list = document.getElementById('carousel_list');
  const left_btn = document.getElementById('left_btn');
  const right_btn = document.getElementById('right_btn');
  const circles_ol = document.getElementById('circles_ol');
  const circle_lis = circles_ol.getElementsByTagName('li')
  const banner = document.getElementById('banner')
  //克隆第一张li
  const clone_li = carousel_list.firstElementChild.cloneNode(true)
  carousel_list.appendChild(clone_li)

  //当前正在显示的图片序号，从0开始
  let idx = 0;

  //节流锁
  let lock = true;
  //右按钮点击事件
  right_btn.onclick = right_btn_handler

  //右按钮的事件处理函数
  function right_btn_handler() {
    //判断节流锁的状态 如果是关闭的 什么都不做
    if (!lock) return;

    lock = false;
    //加上过度
    carousel_list.style.transition = 'transform .2s ease 0s'
    idx++;

    carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';

    //判断是否是最后一张 如果是最后一张 那么就要瞬间拉动回来
    if (idx > 4) {
      setTimeout(function () {
        //去掉过度
        carousel_list.style.transition = 'none'
        //删除transform属性
        carousel_list.style.transform = 'none'
        //全局图片序号变为0
        idx = 0;


      }, 500)
    }

    setCircles()

    //开锁
    setTimeout(function () {
      lock = true
    }, 500)
  }

  //左按钮事件监听
  left_btn.onclick = function () {
    if (!lock) return


    lock = false
    // 左按钮很特殊 要先写if语句 
    if (idx == 0) {
      //瞬间拉动到最后
      carousel_list.style.transition = 'none'
      //拉到最后
      carousel_list.style.transform = 'translateX(' + -16.66 * 5 + '%)';
      //改变idx
      idx = 4;

      //延时0毫秒，可以让刚才的瞬移发生之后 在把过度加上
      setTimeout(function () {
        carousel_list.style.transition = 'transform .2s ease 0s'
      }, 0)
    } else {
      idx--;
      carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
    }
    setCircles()

    setTimeout(function () {
      lock = true
    }, 500)
  }

  //设置小圆点的current在谁身上，序号为idx的小圆点才有current类名，其他的li都没有类名
  function setCircles() {
    for (let i = 0; i <= 4; i++) {
      if (i === idx % 5) {
        circle_lis[i].className = 'current'
      } else {
        circle_lis[i].className = ''
      }
    }
  }


  //小圆点的监听
  circles_ol.onclick = function (e) {
    if (e.target.tagName.toLowerCase() == 'li') {
      let n = Number(e.target.getAttribute('data-n'));

      idx = n

      carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';


      setCircles()
    }
  }

  //定时器 
  let timer = setInterval(right_btn_handler, 2000)

  //鼠标进入 轮播图暂停
  banner.onmouseenter = function () {
    clearInterval(timer)
  }
  banner.onmouseleave = function () {
    //设表先关
    clearInterval(timer)
    timer = setInterval(right_btn_handler, 2000)
  }
})();